<template>
    <el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" :size="formSize" status-icon >
        <el-descriptions border :column="2" title="基础信息">
            <el-descriptions-item :rowspan="2" :width="140" label="照片" align="center" >
                <el-image style="width: 100px; height: 100px" @click="onUploadFile('avatar')" :src="ruleForm.avatar ? ruleForm.avatar : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
            </el-descriptions-item>
            <el-descriptions-item label="人员姓名" align="center" >
                <el-form-item prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="手机号码" align="center" >
                <el-form-item prop="mobile">
                    <el-input v-model="ruleForm.mobile" />
                </el-form-item>
            </el-descriptions-item>
            <!-- <el-descriptions-item label="设置密码" align="center" >
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" />
                </el-form-item>
            </el-descriptions-item> -->
        </el-descriptions>
        <el-descriptions class="mt30" border :column="4" title="身份信息">
            <el-descriptions-item :width="140" label="身份证照片" align="center" >
                <el-image style="width: 100px; height: 100px" @click="onUploadFile('idcard_file')" :src="ruleForm.idcard_file ? ruleForm.idcard_file : 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'" />
            </el-descriptions-item>
            <el-descriptions-item label="身份证号" align="center" >
                <el-form-item prop="idcard">
                    <el-input v-model="ruleForm.idcard" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="人员工种" align="center" >
                <el-form-item prop="work">
                    <el-input v-model="ruleForm.work" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="人员岗位" align="center" >
                <el-form-item prop="post">
                    <el-input v-model="ruleForm.post" />
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="mt30" border :column="4" title="其他信息">
            <el-descriptions-item label="人员性别" :width="140"  align="center" >
                <el-form-item prop="sex">
                    <el-radio-group v-model="ruleForm.sex">
                        <el-radio :value="1" size="large">男</el-radio>
                        <el-radio :value="0" size="large">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="开户银行" align="center" >
                <el-form-item prop="bank">
                    <el-input v-model="ruleForm.bank" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="银行卡号" align="center" >
                <el-form-item prop="bank_number">
                    <el-input v-model="ruleForm.bank_number" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="承包类型" align="center" >
                <el-form-item prop="type">
                    <el-input v-model="ruleForm.type" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="所在省份" align="center" >
                <el-form-item prop="province">
                    <el-input v-model="ruleForm.province" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="所在城市" align="center" >
                <el-form-item prop="city">
                    <el-input v-model="ruleForm.city" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="入场日期" align="center" >
                <el-form-item prop="start_date">
                    <el-date-picker class="mt18" style="width: 100%;" v-model="ruleForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="出场日期" align="center" >
                <el-form-item prop="end_date">
                    <el-date-picker class="mt18" style="width: 100%;" v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="单价" align="center" >
                <el-form-item prop="basic_salary">
                    <el-input v-model="ruleForm.basic_salary" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="工作时间" align="center" >
                <el-form-item prop="work_time">
                    <el-input v-model="ruleForm.work_time" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="施工区域" align="center" >
                <el-form-item prop="region">
                    <el-input v-model="ruleForm.region" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="备注" align="center" >
                <el-form-item prop="remarks">
                    <el-input v-model="ruleForm.remarks" />
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
        
        <!-- <el-form-item label="头像" prop="avatar">
            <el-input v-model="ruleForm.avatar" />
        </el-form-item> -->
    </el-form>
    <div class="mt20 text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="upload" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import http from '../../../util/request';
import { useRouter } from 'vue-router';
import upload from '@/components/upload.vue'
import router from '../../../router';
const loading = ref<boolean>(false)
const id:any = ref(useRouter().currentRoute.value.params.id)
let uploadData:any = ref({prefix:'user/',type:''})
const showUpload = ref<boolean>(false)

interface RuleForm {
    id:number
    name: string
    mobile: string
    sex:number
    avatar:string
    idcard:string
    idcard_file:string
    post:string
    work:string
    bank:string
    bank_number:string
    type:string
    province:string
    city:string
    basic_salary:number
    password:string
    start_date:string
    end_date:string
    remarks:string
    work_time:string
    region:string
} 

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    name: '',
    mobile: '',
    avatar:'',
    password:'123456',
    sex:1,
    idcard:'/',
    idcard_file:'',
    post:'/',
    work:'/',
    bank:'/',
    bank_number:'/',
    type:'/',
    province:'/',
    city:'/',
    basic_salary:0,
    start_date:'',
    end_date:'',
    remarks:'/',
    work_time:'/',
    region:'/'
})

const onGetData = () => {
    if(!id.value || id.value == 0){
        return
    }
    http.get('/labourer/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
    })
}

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' },
        { min: 2, max: 30, message: '范围在2-30字之间', trigger: 'blur' },
    ],
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入正确格式的手机号码', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/labourer',ruleForm.value)
            }else{
                request = http.put('/labourer',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                onGetData()
            })
                      
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{
    onGetData()
})

const onUploadFile = (type:string) => {
    uploadData.value.type = type
    if(type == 'idcard_file'){
        uploadData.value.image = ruleForm.value.idcard_file
    }
    if(type == 'avatar'){
        uploadData.value.image = ruleForm.value.avatar
    }
    uploadData.value.id = id.value
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'idcard_file'){
        ruleForm.value.idcard_file = data
    }
    if(uploadData.value.type == 'avatar'){
        ruleForm.value.avatar = data
    }
    showUpload.value = false
}

</script>
<style scoped>
.el-form-item{margin-bottom: 0px !important;}
</style>
